<template>
	<view class="e-skeleton-waterfall" :style="[customStyle]">
		<view class="e-skeleton-waterfall__left">
			<view class="e-skeleton-waterfall__item" v-for="(item, index) in list[0]" :key="index">
				<view class="e-skeleton-waterfall__item__img">
					<SkeletonBlock>
						<view :style="{
								height: item.height
							}"
						></view>
					</SkeletonBlock>
				</view>

				<view class="e-skeleton-waterfall__item__name">
					<SkeletonBlock>
						<view class="e-skeleton-waterfall__item__name-block"></view>
					</SkeletonBlock>
				</view>
				<view class="e-skeleton-waterfall__item__desc">
					<SkeletonBlock>
						<view class="e-skeleton-waterfall__item__desc-block"></view>
					</SkeletonBlock>
				</view>
			</view>
		</view>
		<view class="e-skeleton-waterfall__right">
			<view class="e-skeleton-waterfall__item" v-for="(item, index) in list[1]" :key="index">
				<view class="e-skeleton-waterfall__item__img">
					<SkeletonBlock>
						<view
							:style="{
								height: item.height
							}"
						></view>
					</SkeletonBlock>
				</view>

				<view class="e-skeleton-waterfall__item__name">
					<SkeletonBlock>
						<view class="e-skeleton-waterfall__item__name-block"></view>
					</SkeletonBlock>
				</view>
				<view class="e-skeleton-waterfall__item__desc">
					<SkeletonBlock>
						<view class="e-skeleton-waterfall__item__desc-block"></view>
					</SkeletonBlock>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'skeleton-waterfall'
});
</script>

<script lang="ts" setup>
import { computed } from 'vue';
import SkeletonBlock from './block.vue';
const props = withDefaults(
	defineProps<{
		config: {
			imgHeight: number;
			waterfall: boolean;
			length: number;
		};
		customStyle?: Record<any, any>|string;
		animate?: boolean;
	}>(),
	{
		config: () => ({
			imgHeight: 150,
			waterfall: true,
			length: 10
		})
	}
);

const list = computed(() => {
	let arr: Array<{ height: string }[]> = [[], []];
	const height = parseInt(`${props.config.imgHeight}`, 10);
	let [leftHeight, rightHeight] = [0, 0];
	[...new Array(props.config.length).keys()].forEach((item, index) => {
		let nowHeight = height;

		if (props.config.waterfall) {
			// 生成随机高度差
			let operator = Math.random();
			let tempHeight = Math.floor(Math.random() * 50);
			if (operator >= 0.5) {
				nowHeight += tempHeight;
			} else {
				nowHeight -= tempHeight;
			}
			if (rightHeight < leftHeight) {
				arr[1].push({
					height: `${nowHeight}px`
				});
				rightHeight += nowHeight;
			} else {
				arr[0].push({
					height: `${nowHeight}px`
				});
				leftHeight += nowHeight;
			}
		}
	});
	return arr;
});
</script>

<style lang="scss" scoped>
@import '../../libs/theme/skeleton-waterfall.scss';
</style>
